<template>
  <div class="pages poslakaraDetail">
    <div class="pageLevel">
      <div>
        <el-form :label-position="labelPosition" :model="lakaraForm" :rules="rules" ref="lakaraForm" label-width="100px" class="add-user-form" size="mini">
          <el-row>
            <el-button size="mini" type="primary" @click="goBack()">返回</el-button>
            <el-button size="mini" type="primary" @click="submitForm('lakaraForm')">提交</el-button>
          </el-row>
          <el-form-item label="组织机构类型" prop="organizationType" label-width="150px">
            <el-input :disabled="true" class="add-input" v-model="lakaraForm.organizationType"></el-input>
          </el-form-item>
          <el-form-item label="上一级单位" prop="upperLevelUnits" label-width="150px">
            <!-- <el-select filterable size="small" style="width:200px" v-model="lakaraForm.upperLevelUnits" @change="parentIdoptionsChange">
              <el-option v-for="item in parentIdoptions" :key="item.index" :label="item.label" :value="item.value"> </el-option>
            </el-select> -->
            <el-input :disabled="true" class="add-input" v-model="lakaraForm.upperLevelUnits"></el-input>
          </el-form-item>
          <el-form-item label="绑定的门店" prop="bindingStores" label-width="150px">
            <el-select filterable size="small" style="width:200px" v-model="lakaraForm.bindingStores" @change="bindingStoresListChange">
              <el-option v-for="item in bindingStoresList" :key="item.index" :label="item.shopName" :value="item.shopId"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店POS设备号" prop="storePos" label-width="150px">
            <el-select filterable size="small" style="width:200px" v-model="lakaraForm.storePos">
              <el-option v-for="item in storePosList" :key="item.index" :label="item.code" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商户号" prop="mchid" label-width="150px">
            <el-input class="add-input" type="text" maxlength="20" v-model="lakaraForm.mchid"></el-input>
          </el-form-item>
          <el-form-item label="终端编号" prop="terminalNumber" label-width="150px">
            <el-input class="add-input" type="text" maxlength="20" v-model="lakaraForm.terminalNumber"></el-input>
          </el-form-item>

        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import {
  saveOrUpdateLaKaDevice,
getBindPosDeviceList,
findMerchantDetailsInfo,
getChildOrgList,
getLaKaDeviceDetail,
getShopIdMchid
} from
"@/api";
export default {
  data() {
    return {
      showTab: "",
      labelPosition: "left",
      bindingStoresList: [], //绑定门店
      storePosList: [], //门店pos 设备号列表
      parentIdoptions: "", //上级单位
      lakaraForm: {
        organizationType: "连锁门店", //组织机构
        upperLevelUnits: "", //上一级单位
        bindingStores: "", //绑定的门店
        storePos: "", //门店pos 设备号
        terminalNumber: "", //终端号
        mchid: "" //商户号
      },
      rules: {
        organizationType: [
          { required: true, message: "请输入组织机构类型", trigger: "blur" }
        ],
        upperLevelUnits: [
          { required: true, message: "请选择上一级单位", trigger: "change" }
        ],
        bindingStores: [
          { required: true, message: "请选择绑定的门店", trigger: "change" }
        ],
        storePos: [
          { required: true, message: "请选择门店POS设备号", trigger: "change" }
        ],
        terminalNumber: [
          { required: true, message: "请输入终端编号", trigger: "blur" }
        ],
        mchid: [{ required: true, message: "请输入商户号", trigger: "blur" }]
      },
      val: "",
      vals: ""
    };
  },
  computed: mapState(["merchantId", "pageLevel"]),
  created() {},
  mounted() {
    this.upshop(); //上一级门店
    this.bindingStoresLists();
    this.showTab = util.getQuery("showTab");
    // 点击修改过来的
    if (this.showTab == "2") {
      this.detailLakara(); //详情接口
    }
  },
  methods: {
    // 修改详情接口
    detailLakara() {
      let data = {
        id: util.getQuery("id")
      };
      getLaKaDeviceDetail(data).then(res => {
        this.lakaraForm.organizationType = "连锁门店";
        this.lakaraForm.upperLevelUnits = res.data.parentId;
        this.lakaraForm.bindingStores = res.data.shopId;
        this.lakaraForm.storePos = res.data.relateCode;
        this.lakaraForm.terminalNumber = res.data.code;
        this.lakaraForm.mchid = res.data.mchid;
        this.val = this.lakaraForm.upperLevelUnits;
        this.vals = this.lakaraForm.bindingStores;
        this.upshop(); //上一级门店
        this.bindingStoresLists();
        let data = {
          shopId: this.lakaraForm.bindingStores
        };
        getBindPosDeviceList(data).then(res => {
          if (res.data != null) {
            this.storePosList = res.data;
          }
        });
      });
    },
    // 点击返回按钮
    goBack() {
      history.back();
    },
    // 点击保存按钮
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = {
            parentId: this.merchantId,
            shopId: this.lakaraForm.bindingStores,
            relateCode: this.lakaraForm.storePos,
            mchid: this.lakaraForm.merchantNumber,
            code: this.lakaraForm.terminalNumber,
            id: util.getQuery("id"),
            mchid: this.lakaraForm.mchid
          };
          saveOrUpdateLaKaDevice(data)
            .then(res => {
              if (res.code == "200") {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "success"
                });
                this.goBack();
              } else {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "error"
                });
              }
            })
            .catch(res => {});
        } else {
          return false;
        }
      });
    },
    //获取上级单位
    upshop() {
      let data = {
        merchantId: this.merchantId
      };
      findMerchantDetailsInfo(data).then(res => {
        this.lakaraForm.upperLevelUnits = res.data.name;
      });
    },
    // 上级单位改变时
    parentIdoptionsChange(val) {
      this.val = val;
      if (this.val) {
        this.lakaraForm.bindingStores = "";
        this.lakaraForm.storePos = "";
        this.bindingStoresList = [];
        this.storePosList = [];
      }
      this.bindingStoresLists();
      this.storePosLists();
    },
    // 绑定门店的接口
    bindingStoresLists() {
      let data = {
        orgId: this.merchantId
      };
      getChildOrgList(data).then(res => {
        if (res.data != null) {
          this.bindingStoresList = res.data;
        }
      });
    },

    // 绑定门店改变时
    bindingStoresListChange(val) {
      this.vals = val;
      if (this.vals) {
        this.lakaraForm.storePos = "";
        this.storePosList = [];
      }
      this.storePosLists(this.vals);
    },
    // 门店POS 管理接口
    storePosLists(shopId) {
      let data = {
        shopId: shopId
      };
      getBindPosDeviceList(data).then(res => {
        // if (res.data != null) {
        this.storePosList = res.data;
        // }
      });
      if (this.lakaraForm.bindingStores != "") {
        //根据门店id查询商户号
        getShopIdMchid(data).then(res => {
          if (res.data != null) {
            this.lakaraForm.mchid = res.data.mchid;
          }
        });
      }
    }
  }
};
</script>
<style scoped>
.add-user-form {
  line-height: 60px;
  margin-left: 5%;
  margin-top: 1%;
}
.add-input {
  width: 300px;
}
</style>
